<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="box">
			<text class="title">选择司机</text>
			<view class="add" @tap="addDriver">
				<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png" mode="">
				</image>
				<text>添加司机</text>
			</view>
			<view class="items">
				<view v-for="(item,index) in driverList" :key="index"
					:class="item.selected?'active':(item.isTcr?'inactive':'')"
					@tap="!item.isTcr?selectDriver(item,index):''">{{item.passengerNameCopy}}</view>
			</view>
		</view>
		<view class="box">
			<text class="title">选择车辆</text>
			<view class="add" @tap="addCar">
				<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png" mode="">
				</image>
				<text>添加车辆</text>
			</view>
			<view class="items">
				<view v-for="(item,index) in carList" :key="index"
					:class="item.selected?'active':(item.isSj?'inactive':'')"
					@tap="!item.isSj?selectCar(item,index):''">{{item.plateNumber}}</view>
			</view>
		</view>
		<view class="sure" @tap="sure">确定</view>
	</view>
</template>

<script>
	export default {
		name: 'addCar',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '添加车辆',
				driverList: [],
				carList: [],
				driver: null,
				car: null
			}
		},
		onLoad(option) {
			if (option.item) {
				this.item = JSON.parse(option.item);
			}
			this.getCars(option);
			this.getDrivers(option);
		},
		methods: {
			getDrivers(option) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.driverList = this.$uct.setPersonType(res.data.data).filter(d=>d.personType==1||d.personType==4);
						this.driverList.forEach((d, i) => {
							d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName,1);
							this.$set(this.driverList[i], 'selected', false);
							if (option.selectInfo && JSON.parse(option.selectInfo).passengers.find(p => p
									.card == d.card)) {
								this.$set(this.driverList[i], 'isTcr', true);
							}
							if (option.selectInfo && JSON.parse(option.selectInfo).passengerCars.find(p =>
									p.idcard == d.card)) {
								this.$set(this.driverList[i], 'isTcr', true);
							}
							if (option.item && JSON.parse(option.item).idcard == d.card) {
								this.$set(this.driverList[i], 'selected', true);
								this.driver = d;
							}
						})
					} else this.$showModal(res.data.msg);
				})
			},
			getCars(option) {
				this.$api.get('/api/isplatenumber/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.carList = res.data.data;
						this.carList.forEach((d, i) => {
							this.$set(this.carList[i], 'selected', false);
							if (option.selectInfo && JSON.parse(option.selectInfo).passengerCars.find(p =>
									p.carno == d.plateNumber)) {
								this.$set(this.carList[i], 'isSj', true);
							}
							if (option.item && JSON.parse(option.item).carno == d.plateNumber) {
								this.$set(this.carList[i], 'selected', true);
								this.car = d;
							}
						})
					} else this.$showModal(res.data.msg);
				})
			},
			selectDriver(item, index) {
				this.driver = item;
				this.driverList.forEach((d, i) => {
					this.$set(this.driverList[i], 'selected', i == index ? true : false);
				})
				let newCard = JSON.parse(JSON.stringify(item.card));
				this.$api.post('/travel/ship/ticket/passager/iolocal', {
					credentialType: item.personType,
					credentialNum: this.$aesTm.encrypt(newCard)
				}).then(res => {
					if (res.data.code === 0) {
						this.driver.discounts = res.data.data || 0;
					}
				})
			},
			selectCar(item, index) {
				this.car = item;
				this.carList.forEach((d, i) => {
					this.$set(this.carList[i], 'selected', i == index ? true : false);
				})
			},
			addDriver() {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship',
					events: {
						addPassengerSuccess: () => {
							this.getDrivers();
						}
					}
				})
			},
			addCar() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/inputCarInfo',
					events: {
						addCarNo: () => {
							this.getCars();
						}
					}
				})
			},
			sure() {
				if (!this.driver || !this.car) return this.$showToast('请选择司机和车辆');
				this.getOpenerEventChannel().emit('addDriverSuccess', {
					name: this.driver.passengerName,
					type: this.driver.personType == 1 ? '成人票' : '儿童票',
					carno: this.car.plateNumber,
					idcard: this.driver.card,
					childs: 0,
					discounts: this.driver.discounts,
					personType: this.driver.personType,
					cardType:this.driver.cardType
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding: 0 30rpx 186rpx;

		// padding-top: 130rpx;
		.box {
			padding-top: 63rpx;
			overflow: hidden;

			.title {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.add {
				width: calc(100% - 36rpx);
				height: 64rpx;
				border-radius: 16rpx;
				background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;


				display: flex;
				align-items: center;
				justify-content: center;
				margin: 27rpx 18rpx 0;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					margin-left: 8rpx;
				}
			}

			.items {
				margin-top: 30rpx;
				overflow: hidden;

				&>view {
					width: calc(100% / 3 - 15rpx);
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					background: #F5F8FA;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					float: left;
					margin: 15rpx 0 0 15rpx;

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					&.active {
						background: #007A69;
						color: #FFFFFF;
					}

					&.inactive {
						color: #999;
						cursor: not-allowed;
					}
				}
			}
		}

		.sure {
			width: calc(100% - 48rpx);
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			background: #007A69;
			border-radius: 46rpx;
			position: fixed;
			bottom: 64rpx;
			left: 24rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>